<template>
  <div>
    <el-date-picker
      v-model="timeList"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      @change="myTimeChange"
    >
    </el-date-picker>
  </div>
</template>

<script setup name="TimeToString">
import { onMounted, ref } from "vue";
const emit = defineEmits(["update:start", "update:end"]);
const props = defineProps({
  start: {
    type: String,
    default: "",
  },
  end: {
    type: String,
    default: "",
  },
});

let timeList = ref([]);
onMounted(() => {
  if (props.start && props.end) {
    timeList.value = [props.start, props.end];
  }
});
const myTimeChange = (val) => {
  if (timeList.value && timeList.value?.length) {
    emit("update:start", val[0]);
    emit("update:end", val[1]);
  } else {
    emit("update:start", "");
    emit("update:end", "");
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-date-editor--daterange.el-input__inner) {
  width: 215px !important;
}
</style>
